<template>
  <div class="service-detail">
    <div class="banner container-fuild text-center">交流问答</div>
    <div class="container">
      <el-card class="box-card">
        <div class="ask-box">
          <div class="pull-left">
            <img src="../assets/img/laywer.png" alt="">
          </div>
          <div class="pull-right">
            <h4>Blue Lagoon Iceland is a place where the powers of geothermal seawater create</h4>
            <p>Iceland is a place where the powers of geothermal seawater create transformational spa journeys. Find out more</p>
            <div>
              <p>2021年8月30日 <span>30人阅读</span></p>
              <el-button type="primary" @click="toAsk">回复</el-button>
            </div>
          </div>
        </div>
        <div class="answer-box">
          <div class="title"><p>回复<span>3个</span></p></div>
          <div class="answer-item" v-for="it in 3" :key="it">
            <div class="item-t">
              <div class="pull-left">
                <img src="../assets/img/laywer.png" alt="">
              </div>
              <div class="pull-right">
                <p><span class="nick">张律师：</span><span>在一个挂载点使用多个组件</span></p>
                <p class="time">2021-08-31 11:20</p>
                <p style="padding-left: 20px"><span class="nick">张律师</span>等人<span class="nick">共2条回复</span></p>
              </div>
            </div>
            <div class="item-f">
              <el-form :model="ruleForm" status-icon ref="ruleForm">
                <el-form-item prop="answer">
                  <el-input type="textarea" v-model="ruleForm.answer"></el-input>
                </el-form-item>
                <el-form-item class="btn-item">
                  <el-button type="primary" @click="submitForm('ruleForm')">评论</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "AskDetail",
  data() {
    return {
      id: "",
      ruleForm: {
        answer: ''
      }
    };
  },
  mounted() {
    this.id = this.$route.params.id || 123;
    var wow = new WOW();
    wow.init();
  },
  created(){
    this.getDataDetail()
  },
  methods: {
    toAsk() {
        this.submitForm()
    },
    submitForm() {
      let obj =Object.assign({answerContent:'',serviceId:'',userId:''})
      this.$util.post('api/service/answer',obj).then(res=>{
        console.log(res)
      })
    },
    getDataDetail(){
      this.$http.post('api/question/getInfo',{}).then(res=>{
        console.log(res)
      })
    }
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.container {
  margin: 40px auto;
}
.ask-box {
  display: flex;
  background: cornflowerblue;
  padding: 20px;
  color: #fff;
  align-items: center;
  margin-bottom: 30px;
}
.ask-box .pull-left {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
.ask-box .pull-left img {
  width: 100%;
  height: 100%;
}
.ask-box .pull-right div {
  display: flex;
  justify-content: space-between;
}
.answer-box .title p span,
.ask-box .pull-right span {
  border-left: 2px solid #fff;
  padding-left: 10px;
  margin-left: 5px;
}
.answer-box .answer-item {
  padding: 20px 20px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 40px;
}
.answer-box .item-t {
  display: flex;
}
.answer-box .answer-item .pull-left {
  margin-right: 10px;
}
.answer-box .answer-item .pull-left img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.answer-box .answer-item .pull-right p .nick {
  color: cornflowerblue;
}
.time {
  color: #ccc;
}
.btn-item {
  text-align: right;
}
</style>
